<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="选择器">
        扩展选择器组件，用于各种表单选择器，简化使用，内置缓存，可对相同的数据减少http请求，也可手动刷新数据源
      </a-card>
    </div>
    <a-card :bordered="false" class="mt-3 proCard">
      <a-alert title="基础使用" type="info">
        <template #description>自动加载数据，首次加载缓存，之后同一个KEY不在获取新数据</template>
      </a-alert>
      <div class="mt-3">
        <a-space align="center">
          <BasicSelect
            ref="basicSelectRef"
            v-model="selectValue"
            :request="loadSelectData"
            @update:value="handleUpdateValue"
            :field-names="{
              value: 'id',
              label: 'regionName',
            }"
            cache
            cacheKey="SELECT_CLASSIFY"
          />
          <a-button @click="setSelectData">设置选中值</a-button>
          <a-button @click="getSelectValue">获取选中值</a-button>
          <a-button @click="getSelectData">获取数据源</a-button>
          <a-button @click="refreshSelectData">刷新数据</a-button>
        </a-space>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { getProvinceList } from '@/api/select/select';
  import { BasicSelect } from '@/components/Select';
  import { Message } from '@arco-design/web-vue';
  import { Notification } from '@arco-design/web-vue';

  const selectValue = ref(3023);
  const basicSelectRef = ref();
  const params = {
    type: 1,
  };

  async function loadSelectData(res) {
    //这里可以进行数据转换处理
    return await getProvinceList({ ...res, ...params });
  }

  function handleUpdateValue(value, option) {
    Message.info('value: ' + JSON.stringify(value));
    Message.info('option: ' + JSON.stringify(option));
  }

  function refreshSelectData() {
    basicSelectRef?.value.fetch();
  }

  function setSelectData() {
    selectValue.value = 5308;
  }

  function getSelectValue() {
    Message.info('value: ' + JSON.stringify(selectValue.value));
  }

  function getSelectData() {
    Notification.info({
      title: '全部数据',
      content: JSON.stringify(
        basicSelectRef?.value
          .getData()
          .map((item) => item.fullName)
          .join('，'),
      ),
    });
  }
</script>

<style lang="less"></style>
